<template>
  <div class="order-detail">
    <div class="order-status rx-sc">
      <div class="rx-ss">
        <img src="../../assets/order/order-status-icon1.png" v-show="orderInfo.orderStatus==1" />
      <img src="../../assets/order/order-status-icon2.png" v-show="orderInfo.orderStatus==2" />
      <img src="../../assets/order/order-status-icon3.png" v-show="orderInfo.orderStatus==3" />
      <img src="../../assets/order/order-status-icon4.png" v-show="orderInfo.orderStatus==4" />
      <img src="../../assets/order/order-status-icon5.png" v-show="orderInfo.orderStatus==5" />
      <div class="fwb" v-show="orderInfo.orderStatus==1||orderInfo.orderStatus==4||orderInfo.orderStatus==5">{{orderInfo.orderStatus==5?'交易关闭，订单已取消':orderInfo.orderStatus==1?'待付款':orderInfo.orderStatus==4?'交易成功':''}} </div>
      <div class="" v-show="orderInfo.orderStatus==2 || orderInfo.orderStatus==3">
        <div class="fwb mb20">{{orderInfo.orderStatus==2?'待发货':orderInfo.orderStatus==3?'待收货':''}}</div>
        <div class="fz-24">{{orderInfo.orderStatus==2?'等待卖家发货':orderInfo.orderStatus==3?'卖家已发货':''}}</div>
      </div>
      </div>
    </div>
    <div class="order-address rx-sc">
      <img src="../../assets/order/order-address-icon.png" />
      <div class="user">
        <div class="user-detail">{{addressInfo.userName}}<span> {{addressInfo.userPhone}}</span></div>
        <div class="user-address">{{addressInfo.address}}</div>
      </div>
    </div>
    <div class="order-list" >
          <div class="order-title dis-sp" @click="goGoodsDetail(goodsInfo.goodsId)">
            <div class="order-title-left rx-sc">
              <img :src="sellerInfo.sellerLogo" />
              <div class="">{{sellerInfo.sellerName}}</div>
            </div>
            <div class="order-title-right" :style="orderInfo.orderStatus==5?'color:#8A8B90':'color:#DB1919'">{{orderInfo.orderStatus==1?'待付款':orderInfo.orderStatus==2?'待发货':orderInfo.orderStatus==3?'待收货':orderInfo.orderStatus==4?'已完成':orderInfo.orderStatus==5?'已关闭':'未知'}}</div>
          </div>
          <div class="order-content dis-sp-s" @click="goGoodsDetail(goodsInfo.goodsId)">
            <div class="order-goods rx-ss">
              <div class="goods-img" :style="{backgroundImage:'url('+goodsInfo.mainPhoto+')'}">
                <!-- <img :src="goodsInfo.mainPhoto" alt=""> -->
              </div>
              <div class="goods-detail">
                <div class="goods-title">{{goodsInfo.goodsName}}</div>
                <div class="goods-label">包邮</div>
              </div>
            </div>
            <div class="" style="text-align: right;">
              <div class="order-price">￥<span>{{goodsInfo.goodsPrice}}</span></div>
              <span class="order-num">x {{goodsInfo.goodsNum}}</span>
            </div>
          </div>
          <div class="afterSales-btn rx-ec" v-if="orderInfo.refund">
            <div class="refund-order-btn" @click="applyAfterSales()">申请售后</div>
          </div>
    </div>
    <div class="payment">
      <div class="payment-title">支付信息</div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">商品金额</div>
        <div class="payment-detail-right">￥<span>{{orderInfo.totalPrice}}</span></div>
      </div>
      <div class="payment-detail dis-sp">
        <div class="payment-detail-left">实际支付</div>
        <div class="payment-detail-right cor-DB1919">￥<span>{{orderInfo.realPrice}}</span></div>
      </div>
    </div>
    <div class="payment">
      <div class="payment-title">订单信息</div>
      <div class="payment-detail dis-sp mb24">
        <div class="payment-detail-left">{{infoList[0].infoTitle}}</div>
        <div class="payment-detail-right rx-ec">
          <div class="cor-999">{{infoList[0].infoContent}}</div>
          <div class="cor-DB1919 ml20" @click="toCopy(1)">复制</div>
        </div>
      </div>
      <div class="payment-detail dis-sp">
        <div class="payment-detail-left">{{infoList[1].infoTitle}}</div>
        <div class="payment-detail-right cor-999">{{infoList[1].infoContent}}</div>
      </div>
    </div>
    <div class="payment" v-if="orderInfo.orderStatus >= 3">
      <div class="payment-detai dis-sp mb24">
        <div class="payment-detail-left">配送方式</div>
        <div class="payment-detail-right">{{orderInfo.methods}}</div>
      </div>
      <div class="pay-price dis-sp">
        <div class="payment-detail-left">快递单号</div>
        <div class="payment-detail-right rx-ec">
          <div class="cor-999">{{infoList[0].infoContent}}</div>
          <div class="cor-DB1919 ml20" @click="toCopy(2)">复制</div>
        </div>
      </div>
    </div>
    <div class="order-btn rx-ec" v-if="orderInfo.orderStatus == 1 || orderInfo.orderStatus == 3">
      <div class="cancel-order" v-if="orderInfo.orderStatus == 1" @click="cancelOrder(orderInfo)">取消订单</div>
      <div class="continue-order" v-if="orderInfo.orderStatus == 1" @click="continuePay(orderInfo)">继续付款</div>
      <div class="confirm-order" v-if="orderInfo.orderStatus == 3" @click="confirmOrder(orderInfo)">确认收货</div>
    </div>
  </div>
</template>

<script>
import $api from "@/api/index";

export default({
  name: "ShopHome",
  components: {
    
  },
  data() {
    return { 
      active:0,
      goodsInfo:{},
      infoList:[{},{}],
      orderInfo:{},
      sellerInfo:{},
      addressInfo:{}
    };
  },
  created(){
    let orderId = this.$route.query.orderId
    if(orderId){
      this.orderId = orderId
    }
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail(){
      $api.orderApi.orderDetail({orderId:this.orderId}).then((res)=>{
        this.addressInfo = res.data.addressInfo
        this.goodsInfo = res.data.goodsInfo
        this.infoList = res.data.infoList
        this.orderInfo = res.data.orderInfo
        this.sellerInfo = res.data.sellerInfo
      })
    },
    applyAfterSales(){
      this.goodsInfo.orderId = this.orderInfo.orderId
      let goodsInfo = JSON.stringify(this.goodsInfo)
      this.$router.push({name:"AfterSales",params:{data:goodsInfo}})
      // this.$router.push({path:'AfterSales',params: {data:JSON.stringify(this.goodsInfo)}})
    },
    goGoodsDetail(id){
      this.$router.replace({path:"/goodsDetail",query:{goodsId:id,source:'2'}})
    },
    continuePay(orderInfo){
      $api.orderApi.continuePay({orderId:orderInfo.orderId}).then((res)=>{
        if(res.status == 10000){
          let datas = res.data.data
          let that = this
          function onBridgeReady() {
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                  "appId": datas.appId,     //公众号名称，由商户传入
                  "timeStamp": datas.timeStamp,         //时间戳，自1970年以来的秒数
                  "nonceStr": datas.nonceStr, //随机串
                  "package": datas.package,
                  "signType": datas.signType,         //微信签名方式：
                  "paySign": datas.paySign //微信签名
              },
              function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    that.$toast.success('支付成功');
                    that.$router.replace({path:'/orderList',query: {status:3}})
                    // that.$router.replace({path:"/paySuccess"})
                    that.active = 2
                    that.page = 0
                    that.getOrderLi()
                  } else {
                    that.$toast.fail('您已取消支付');
                  }
              }
            )}
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
          }
        })
    },
    cancelOrder(orderInfo){
      $api.orderApi.cancelOrder({orderId:orderInfo.orderId}).then((res)=>{
        if(res.status == 10000){
          this.$toast("取消成功");
          this.$router.replace({path:'/orderList',query: {status:0}})
        }
      })
    },
    confirmOrder(orderInfo){
      $api.orderApi.confirmOrder({orderId:orderInfo.orderId}).then((res)=>{
        console.log(res)
        if(res.status == 10000){
          this.$toast("收货完成");
          this.$router.replace({path:'/orderList',query: {status:4}})
        }
      })
      
    },
    toCopy(){
      let str = this.infoList[0].infoContent;
      this.$copyText(str).then(
        res => {
          this.$message.info("已成功复制");
        },
        err => {
          this.$message.info("复制失败");
        }
      )
    },
  }
});
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-detail {
  height: 100vh;
  background: #F7F7F7;
  .order-status {
    height: 192px;
    padding: 0 24px;
    background-image: url('../../assets/order/order-status-bg.png');
    background-repeat: no-repeat;
    background-size: (100%,192px);
    img {
      width: 34px;
      height: 34px;
      margin-right: 12px;
    }
    div {
      font-size: 32px;
      color: #fff;
    }
    .fz-24 {
      font-size: 24px !important;
    }
  }
  .order-address {
    padding: 32px 24px;
    text-align: left;
    background: #fff;
    img {
      width: 32px;
      height: 32px;
      margin-right: 24px;
    }
    .user-detail {
      color: #404040;
      font-size: 28px;
      margin-bottom: 8px;
      span {
        margin-left: 24px;
        color: #666666;
      }
    }
    .user-address {
      font-size: 24px;
      color: #666666;
    }
  }
  .order-list {
    margin-top: 24px;
    padding: 24px 24px 32px 24px;
    background: #fff;
    .order-title {
      margin: 0 0 32px 0;
      font-size: 28px;
      .order-title-left{
        color: #50525A;
        img {
          width: 32px;
          height: 32px;
          margin-right: 12px;
        }
      }
    }
    .order-goods {
      .goods-img {
        min-width:160px;
        width: 160px;
        height: 160px;
        margin-right: 24px;
        border-radius: 4px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .goods-title {
        height: 68px;
        font-size: 24px;
        color: #171823;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-right: 60px;
        margin-bottom: 36px;
        text-align: left;
      }
      .goods-label {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        border: 2px solid #DB1919;
        font-size: 20px;
        color: #DB1919;
      }
    }
    .order-price {
      color: #8A8B90;
      font-size: 20px;
      span {
        font-size: 28px;
      }
    }
    .order-num {
      font-size: 24px;
      color: #8A8B90;
    }
  }

  .payment {
    margin-top: 24px;
    padding: 32px 24px;
    background: #fff;
    font-size: 28px;
    .payment-title {
      margin-bottom: 32px;
      text-align: left;
      font-weight: 500;
      color: #404040;
    }
    .payment-detail{
      color: #50525A;
      .payment-detail-left{
        
      }
      .payment-detail-right{
      }
    }
  }
  .afterSales-btn {
    margin-top: 16px;
    text-align: right;
  }
  .refund-order-btn {
    width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        color: #DB1919;
        border: 2px solid #DB1919;
        border-radius: 2px;
        margin-right: 16px;
  }
  .confirm-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #DB1919;
        color: #fff;
        border-radius: 2px;
        margin-right: 16px;
      }
  .order-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 32px 0;
    background: #fff;
      .cancel-order {
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 2px;
        border: 2px solid #D7D8D8;
        color: #8A8B90;
        margin-right: 16px;
      }
      .continue-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #DB1919;
        color: #fff;
        border-radius: 2px;
        margin-right: 16px;
      }
      
      .delete-order{
        width: 160px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 2px;
        border: 2px solid #D7D8D8;
        color: #8A8B90;
        margin-right: 16px;
      }
    }
}
.cor-DB1919{
  color: #DB1919;
}
.cor-999{
  color: #999999;
}
</style>
